<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        背景渐变 
            线性渐变 从一个颜色到多个颜色的渐变（用的最多）
             语法： background: linear-gradient(to 方向,渐变颜色,渐变颜色.....);
                to 到...
                to可以省略不写，加上前缀
                方向（可以不写,默认是从上到下）
                    left top right bottom  
                    对角（left top）
                    45deg 取值为正顺时针，取值为负逆时针
                    
                   deg表示度数 

                重复线性渐变  background: repeating-linear-gradient(to 方向,渐变颜色,渐变颜色.....);

            径向渐变 从中心向四周
                语法： background:radial-gradient(渐变的方向，渐变的形状，渐变的大小，渐变的颜色,.......渐变的颜色)
                    方向 默认是中心 
               
            重复径向渐变：  background:repeating-radial-gradient(yellow 27%,red 32%)
     -->
     <style>
        .all{
            width: 400px; height:400px;
            border:dashed 10px blue;
            background:repeating-radial-gradient(yellow 27%,red 32%);
        }
    </style>
</head>
<body>
    <div class="all"></div>
</body>
</html>